大家好我叫 Danny ~ 目前是一個菜鳥的前端工程師,這次的 it 鐵人賽是本人第一次參賽,希望可以透過這次的內容增進自己的技術外,同時也希望可以帶給讀者有趣的知識點並運用在公司專案上,這次的主題是本人近一年常在使用的全端框架 trpc ,也算是近期突然火紅的技術~
trpc 主打的就是讓你可以在 client 端以及 server 端透過 http request 方式互相傳遞資料,例如 modal schema 、 api router info 等等,主要透過 end-to-end typesafe 自動生成相關的 interfcae ,讓 client 端在接 api 時可以馬上知道 api response 結果是什麼,可以大大提升 DX 的體驗。
trpc 會配合一些本人開發中會用到的套件例如 TanStack Query 用來接 api , prisma 作為 orm 框架,甚至 next auth 管理 user auth 內容,對於已經習慣這些生態系的朋友可能會相對好入手。
因為 trpc 是一個用於全端框架例如Nextjs,他對於 api 的生成非常直觀,同時 client 端是透過 react query 接 api ,所以可以非常快速就寫好整個頁面的邏輯。
同時 trpc 有很多方便的輔助工具幫你調適,例如 ci 整合 、 test case、api playground 等等,之後也會跟讀者分享~
trpc 雖然可以用在 express 搭配 vite(react) 去做,但大部分的內容幾乎都是從 next 出發, 所以如果用 next 去起一個 trpc 也會有更多功能可以去使用,穩定性也會好一些。
本系列會盡量多準備一些 demo 讓讀者可以快速理解內容,雖然這次主題是全端框架,但我會盡量用簡單的方式,就算你是前端工程師,也可以快速掌握後端的概念,這部分讀者可以好好期待喔~
最後小工商一下,如果看完文章有不懂想提問的,本人目前有經營小社群大家有興趣也可以進來聊天喔~
✅ 前端社群 :
https://lihi3.cc/kBe0Y